<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报警信息汇总</title>
    <title>报警信息</title>
    <script type="text/javascript" src="/js/staticResources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>
    <style>
        #content{
            left: 0%;
            top: 0%;
            width: 100%;
            height: 100%;
            background-color: white;
            position: absolute;

            
        }
        #part1{
            left: 5%;
            top: 0%;
            width: 20%;
            height: 100%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #part2{
            left: 30%;
            top: 0%;
            width: 10%;
            height: 100%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #part3{
            left: 42%;
            top: 0%;
            width: 25%;
            height: 100%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #part4{
            left: 70%;
            top: 0%;
            width: 25%;
            height: 100%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #machine{
            left: 20%;
            top: 5%;
            width: 60%;
            height: 18%;
            background-color: greenyellow;
            /* border: 1px solid black; */
            position: absolute;
        }
        #mybtn1{
            left: 80%;
            top: 9%;
            width: 7%;
            height: 8%;
            position: absolute;
        }
        #track{
            left: 20%;
            top: 30%;
            width: 60%;
            height: 18%;
            background-color: greenyellow;
            /* border: 1px solid black; */
            position: absolute;
        }
        #mybtn2{
            left: 80%;
            top: 34%;
            width: 7%;
            height: 8%;
            position: absolute;
        }
        #ATC{
            left: 20%;
            top: 55%;
            width: 60%;
            height: 18%;
            background-color: greenyellow;
            /* border: 1px solid black; */
            position: absolute;
        }
        #mybtn3{
            left: 80%;
            top: 59%;
            width: 7%;
            height: 8%;
            position: absolute;
        }
        #logistics{
            left: 20%;
            top: 80%;
            width: 60%;
            height: 18%;
            background-color: greenyellow;
            /* border: 1px solid black; */
            position: absolute;
        }
        #mybtn4{
            left: 80%;
            top: 84%;
            width: 7%;
            height: 8%;
            position: absolute;
        }
        #tuquyu1{
            left: 10%;
            height: 80%;
            width: 80%;
            top: 10%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #tuquyu2{
            left: 10%;
            height: 80%;
            width: 80%;
            top: 10%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #tuquyu3{
            left: 10%;
            height: 80%;
            width: 80%;
            top: 10%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #tuquyu4{
            left: 10%;
            height: 80%;
            width: 80%;
            top: 10%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        img{
            max-width: 100%;
            vertical-align: middle;
        }
        #machineInfo{
            left: 10%;
            top: 5%;
            width: 80%;
            height: 20%;
            background-color: greenyellow;
            border: 1px solid black;
            position: absolute;
        }
        #machineInfo1{
            left: 3%;
            top: 5%;
            width: 94%;
            height: 90%;
            background-color: white;
            border: 1px solid black;
            position: absolute;
        }
        #trackInfo{
            left: 10%;
            top: 30%;
            width: 80%;
            height: 20%;
            background-color: greenyellow;
            border: 1px solid black;
            position: absolute;
        }
        #trackInfo1{
            left: 3%;
            top: 5%;
            width: 94%;
            height: 90%;
            background-color: white;
            border: 1px solid black;
            position: absolute;
        }
        #ATCInfo{
            left: 10%;
            top: 55%;
            width: 80%;
            height: 20%;
            background-color: greenyellow;
            border: 1px solid black;
            position: absolute;
        }
        #ATCInfo1{
            left: 3%;
            top: 5%;
            width: 94%;
            height: 90%;
            background-color: white;
            border: 1px solid black;
            position: absolute;
        }
        #logisticsInfo{
            left: 10%;
            top: 80%;
            width: 80%;
            height: 20%;
            background-color: greenyellow;
            border: 1px solid black;
            position: absolute;
        }
        #logisticsInfo1{
            left: 3%;
            top: 5%;
            width: 94%;
            height: 90%;
            background-color: white;
            border: 1px solid black;
            position: absolute;
        }
        #machineHistoryInfo{
            left: 10%;
            top: 5%;
            width: 80%;
            height: 20%;
            background-color: white;
            border: 1px solid black;
            overflow-x:hidden;
            position: absolute;
        }
        #trackHistoryInfo{
            left: 10%;
            top: 30%;
            width: 80%;
            height: 20%;
            background-color: white;
            border: 1px solid black;
            overflow-x:hidden;
            position: absolute;
        }
        #ATCHistoryInfo{
            left: 10%;
            top: 55%;
            width: 80%;
            height: 20%;
            background-color: white;
            border: 1px solid black;
            overflow-x:hidden;
            position: absolute;
        }
        #logisticsHistoryInfo{
            left: 10%;
            top: 80%;
            width: 80%;
            height: 20%;
            background-color: white;
            border: 1px solid black;
            overflow-x:hidden;
            position: absolute;
        }
        #first{
            left: 10%;
            top: 15%;
            width: 40%;
            height: 5%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #second{
            left: 10%;
            top: 30%;
            width: 40%;
            height: 5%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #third{
            left: 10%;
            top: 45%;
            width: 40%;
            height: 5%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #forth{
            left: 10%;
            top: 60%;
            width: 40%;
            height: 5%;
            background-color: white;
            /* border: 1px solid black; */
            position: absolute;
        }
        #annotation{
            left: 0%;
            top: 68%;
            width: 100%;
            background-color: white;
            position: absolute;
        }


    </style>
</head>
<body>
<script type="text/javascript">
    var clientid='alarm'+Math.random();
    client = new Paho.MQTT.Client("192.168.11.15",8083,clientid); //建立客户端实例
    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件
    function onConnect(){
        //机床模块
        client.subscribe("szlsbj");//机床碰撞报警
        client.subscribe("warn");//NC1机床温度报警
        client.subscribe("warn1");//NC2机床温度报警
        client.subscribe("warn2");//NC3机床温度报警
        client.subscribe("warn3");//NC4机床温度报警
        // client.subscribe("machine");//产线中传输过来的报警信息

        //导轨模块
        client.subscribe("recognitionAlarm");//零件装夹报警
        client.subscribe("trackAlarm");//轨道异物报警

        //刀具模块
        client.subscribe("AlarmInformation");

        //物流模块
        client.subscribe("logistics");


    }
    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });
    }
    function onMessageArrived(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        var date = new Date();
        var m = (date.getMonth()+1).toString().padStart(2,"0");
        var d = date.getDate().toString().padStart(2,"0");
        var hh = date.getHours().toString().padStart(2,"0");
        var mm = date.getMinutes().toString().padStart(2,"0");
        var ss = date.getSeconds().toString().padStart(2,"0");
        var todayDate = m + "-" + d +" "+ hh + ":" + mm + ":" + ss;
        if(payload != "close"&& payload != ""){
            var alarmInformation = payload;
            if (topic == "szlsbj"){
                var alarm1Div = document.getElementById("machineInfo1");
                alarm1Div.innerText = alarmInformation;
                $('#machine').css('background-color','red');//一级报警
                $('#machineInfo').css('background-color','red');//一级报警
            } else if (topic == "trackAlarm"){
                var alarm2Div = document.getElementById("trackInfo1");
                alarm2Div.innerText = alarmInformation;
                $('#track').css('background-color','red');//一级报警
                $('#trackInfo').css('background-color','red');//一级报警
            }else if(topic=="recognitionAlarm"){
                var alarm2Div = document.getElementById("trackInfo1");
                alarm2Div.innerText = alarmInformation;
                $('#track').css('background-color','orange');//二级报警
                $('#trackInfo').css('background-color','orange');//二级报警
            }else if (topic=="AlarmInformation"){
                var decodeMessage = new TextDecoder("utf-8").decode(alarmInformation);//可修改编码格式(UTF-8 ISO-8859-1 GBK)
                var alarm3Div = document.getElementById("ATCInfo1");
                alarm3Div.innerText = decodeMessage;
                $('#ATC').css('background-color','orange');//二级报警
                $('#ATCInfo').css('background-color','orange');//二级报警
            }else if(topic == "logistics"){
                document.getElementById("logisticsInfo1").innerText=alarmInformation;
                $('#logistics').css('background-color','orange');//二级报警
                $('#logisticsInfo').css('background-color','orange');//二级报警
            }else if(topic == "warn"){
                var warn = alarmInformation.split(",")[0];
                warn1 = "1号机床 " + warn;
                var alarm1Div = document.getElementById("machineInfo1");
                alarm1Div.innerText = warn1;
                $('#machine').css('background-color','orange');//二级报警
                $('#machineInfo').css('background-color','orange');//二级报警
            }else if (topic == "warn1"){
                var warn = alarmInformation.split(",")[0];
                warn1 = "2号机床 " + warn;
                var alarm1Div = document.getElementById("machineInfo1");
                alarm1Div.innerText = warn1;
                $('#machine').css('background-color','orange');//二级报警
                $('#machineInfo').css('background-color','orange');//二级报警
            }else if (topic == "warn2"){
                var warn = alarmInformation.split(",")[0];
                warn1 = "3号机床 " + warn;
                var alarm1Div = document.getElementById("machineInfo1");
                alarm1Div.innerText = warn1;
                $('#machine').css('background-color','orange');//二级报警
                $('#machineInfo').css('background-color','orange');//二级报警
            }else if (topic == "warn3"){
                var warn = alarmInformation.split(",")[0];
                warn1 = "4号机床 " + warn;
                var alarm1Div = document.getElementById("machineInfo1");
                alarm1Div.innerText = warn1;
                $('#machine').css('background-color','orange');//二级报警
                $('#machineInfo').css('background-color','orange');//二级报警
            }else if (topic == "machine"){
                document.getElementById("machineInfo1").innerText = alarmInformation;
                $('#machine').css('background-color','orange');//二级报警
                $('#machineInfo').css('background-color','orange');//二级报警
            }
        }
    }

    function covery1() {
        $('#machine').css('background-color','greenyellow');//恢复正常底色
        $('#machineInfo').css('background-color','greenyellow');
        document.getElementById("machineInfo1").innerText="";
    }
    function covery2() {
        $('#track').css('background-color','greenyellow');
        $('#trackInfo').css('background-color','greenyellow');
        document.getElementById("trackInfo1").innerText="";
    }
    function covery3() {
        $('#ATC').css('background-color','greenyellow');
        $('#ATCInfo').css('background-color','greenyellow');
        document.getElementById("ATCInfo1").innerText="";
    }
    function covery4() {
        $('#logistics').css('background-color','greenyellow');
        $('#logisticsInfo').css('background-color','greenyellow');
        document.getElementById("logisticsInfo1").innerText="";
    }

    $(function () {
        getAlarmInfo1();
        getAlarmInfo2();
        getAlarmInfo3();
        getAlarmInfo4();
    });
    setInterval(getAlarmInfo1,2000);
    setInterval(getAlarmInfo2,2000);
    setInterval(getAlarmInfo3,2000);
    setInterval(getAlarmInfo4,2000);
    function getAlarmInfo1(){
        $.ajax({
            type:"get",
            url:"/alarm1",
            contentType:"application/json",
            success:function (data) {
                // console.log("成功");
                if (data.length != 0) {
                    // 拼接字符串
                    var content = data[0].time1 + " " + data[0].level1 + " " + data[0].info;
                    for (var i = 1; i < data.length; i++) {
                        content = content + "\n" + data[i].time1 + " " + data[i].level1 + " " + data[i].info;
                    }
                    document.getElementById("machineHistoryInfo").innerText = content;
                }
            },
            error:function () {
                console.log("失败");
            }
        })

    }
    function getAlarmInfo2(){
        $.ajax({
            type:"get",
            url:"/alarm2",
            contentType:"application/json",
            success:function (data) {
                // console.log("成功");
                if (data.length != 0) {
                    // 拼接字符串
                    var content = data[0].time1 + " " + data[0].level1 + " " + data[0].info;
                    for (var i = 1; i < data.length; i++) {
                        content = content + "\n" + data[i].time1 + " " + data[i].level1 + " " + data[i].info;
                    }
                    document.getElementById("trackHistoryInfo").innerText = content;
                }
            },
            error:function () {
                console.log("失败");
            }
        })

    }
    function getAlarmInfo3(){
        $.ajax({
            type:"get",
            url:"/alarm3",
            contentType:"application/json",
            success:function (data) {
                // console.log("成功");
                if (data.length != 0) {
                    // 拼接字符串
                    var content = data[0].time1 + " " + data[0].level1 + " " + data[0].info;
                    for (var i = 1; i < data.length; i++) {
                        content = content + "\n" + data[i].time1 + " " + data[i].level1 + " " + data[i].info;
                    }
                    document.getElementById("ATCHistoryInfo").innerText = content;
                }
            },
            error:function () {
                console.log("失败");
            }
        })

    }
    function getAlarmInfo4(){
        $.ajax({
            type:"get",
            url:"/alarm4",
            contentType:"application/json",
            success:function (data) {
                // console.log("成功");
                //判断数据是否为空
                if (data.length != 0) {
                    // 拼接字符串
                    var content = data[0].time1 + " " + data[0].level1 + " " + data[0].info;
                    for (var i = 1; i < data.length; i++) {
                        content = content + "\n" + data[i].time1 + " " + data[i].level1 + " " + data[i].info;
                    }
                    document.getElementById("logisticsHistoryInfo").innerText = content;
                }
            },
            error:function () {
                console.log("失败");
            }
        })

    }


</script>
<div id="content">
    <div id="part1">
        <div style="left: 45%;top: -1%;position:absolute"><h3>机床</h3></div>
        <div id="machine">
            <div id="tuquyu1">
                <img src="/images/new_machine_4.jpg" alt="图片不存在">
            </div>
        </div>
        <button id="mybtn1" onclick="covery1()" style="height: 100px;width: 30px;align-content: center" >已处理</button>
        <div style="left: 45%;top: 24%;position:absolute"><h3>物流</h3></div>
        <div id="track">
            <div id="tuquyu2">
                <img src="/images/track_4.png" alt="图片不存在">
            </div>
        </div>
        <button id="mybtn2" onclick="covery2()" style="height: 100px;width: 30px;align-content: center">已处理</button>
        <div style="left: 45%;top: 49%;position:absolute"><h3>刀具</h3></div>
        <div id="ATC">
            <div id="tuquyu3">
                <img src="/images/tool_2.png" alt="图片不存在">
            </div>
        </div>
        <button id="mybtn3" onclick="covery3()" style="height: 100px;width: 30px;align-content: center">已处理</button>
        <div style="left: 45%;top: 74%;position:absolute"><h3>产线</h3></div>
        <div id="logistics">
            <div id="tuquyu4">
                <img src="/images/logistic5.png" alt="图片不存在">
            </div>
        </div>
        <button id="mybtn4" onclick="covery4()" style="height: 100px;width: 30px;align-content: center">已处理</button>
    </div>
    <div id="part2">
        <div style="left: 0%;top: 9%;position: absolute;"><h3>一级报警</h3></div>
        <div id="first">
            <img src="/images/red.png" alt="图片不存在">
        </div>
        <div style="left: 0%;top: 24%;position: absolute;"><h3>二级报警</h3></div>
        <div id="second">
            <img src="/images/orange.jpeg" alt="图片不存在">
        </div>
        <div style="left: 0%;top: 39%;position: absolute;"><h3>三级报警</h3></div>
        <div id="third">
            <img src="/images/yello.png" alt="图片不存在">
        </div>
        <div style="left: 9%;top: 54%;position: absolute;"><h3>正常</h3></div>
        <div id="forth">
            <img src="/images/green.png" alt="图片不存在">
        </div>
        <div id="annotation">
            提示：<br>
            1.一级报警——即刻停机<br>
            2.二级报警——等候人工处置<br>
            3.三级报警——提醒人工处置<br>
            4.人工处置报警后，请点击已处理按钮<br>
        </div>
    </div>
    <div id="part3">
        <div style="left: 43%;top: -1%;position:absolute"><h3>报警信息</h3></div>
        <div id="machineInfo">
            <div id="machineInfo1"></div>
        </div>
        <div style="left: 43%;top: 24%;position:absolute"><h3>报警信息</h3></div>
        <div id="trackInfo">
            <div id="trackInfo1"></div>
        </div>
        <div style="left: 43%;top: 49%;position:absolute"><h3>报警信息</h3></div>
        <div id="ATCInfo">
            <div id="ATCInfo1"></div>
        </div>
        <div style="left: 43%;top: 74%;position:absolute"><h3>报警信息</h3></div>
        <div id="logisticsInfo">
            <div id="logisticsInfo1"></div>
        </div>
    </div>
    <div id="part4">
        <div style="left: 41%;top: -1%;position:absolute"><h3>历史报警信息</h3></div>
        <div id="machineHistoryInfo" ></div>
        <div style="left: 41%;top: 24%;position:absolute"><h3>历史报警信息</h3></div>
        <div id="trackHistoryInfo" ></div>
        <div style="left: 41%;top: 49%;position:absolute"><h3>历史报警信息</h3></div>
        <div id="ATCHistoryInfo" ></div>
        <div style="left: 41%;top: 74%;position:absolute"><h3>历史报警信息</h3></div>
        <div id="logisticsHistoryInfo"></div>
    </div>


</div>
</body>
</html>